<template>
  <div class="invite-page">
     <div class="from-div">
<!--         <div class="logo"><img src="https://pic.moresu.com/FlTZLy_F4iPeEAR7x5z0i6-Em5N1"/></div>-->
         <div class="from-con">
            <el-form v-if="isSubmit==1" class="invit-form" :model="form" :inline="true"
                     :rules="rules"  ref="invitForm"
                     :label-width="labelwidth" label-position="left"
                     :size="size">
                <div class="form-top">
                    <div class="form-top-left">
                      <div class="goodsName">{{ info.goodsName }}<span v-if="info.goodsName">/</span>{{ info.goodsSn }}</div>
                       <div class="btn-label" v-if="info.sendTypes">
                         <span>提货方式：{{ info.sendTypes }}</span>
                       </div>
                    </div>
                    <div class="form-top-right">{{ info.goodsNum }}吨</div>
                </div>
                <el-form-item label="您的报价" prop="supplierPrice">
                   <el-input class="price" v-model="form.supplierPrice"></el-input>
                   <span class="form-item-span">元/吨</span>
                </el-form-item>
                <el-form-item label="公司名称" prop="supplierName">
                  <el-input v-model="form.supplierName"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="form.supplierMobile"></el-input>
                </el-form-item>
                <div class="form-btn">
                  <el-button :size="size"  style="width:100%" type="primary" @click="submitForm" :loading="btnLoading">提 交</el-button>
                </div>
            </el-form>

            <div class="success-div" v-else>
                <img src="https://pic.moresu.com/Fh4l-ozvqPZyWBmPhjbUxXiuRpxr" style="width:60%"/>
                <div class="success-text">报价提交成功，感谢您的参与！</div>
            </div>

         </div>
     </div>

  </div>
</template>

<script>
const defaultForm = {
  inquiryId:'',
  supplierName:'',
  supplierPrice:'',
  supplierMobile:'',
}
  import { getSupplierPriceInfo,addSupplierPrice } from "@/api/allInLine/inquiry";
  export default {
    name: 'invite',
    data() {
      return {
        form:JSON.parse(JSON.stringify(defaultForm)),
        rules:{
          supplierPrice: [
            { required: true, message: "请输入报价金额", trigger: "blur" },
          ],
          supplierName: [
            { required: true, message: "请输入公司名称", trigger: "blur" },
            { min: 4, message: "最少输入4个字符", trigger: "blur" },
          ],
        },
        labelwidth:'140px',
        size:'',
        info:{},
        btnLoading:false,
        isSubmit:1
      }
    },
    created() {
      let screenWidth = window.innerWidth;
      if(screenWidth < 700){
        this.labelwidth = '80px'
        this.size = 'small'
      }else{
        this.labelwidth = '140px'
        this.size = ''
      }
      this.isSubmit = 1
      getSupplierPriceInfo({inquiryId:this.$route.query.inquiryId}).then((res)=>{
          this.info = res
      })
    },
    methods: {
      submitForm(){
        this.$refs.invitForm.validate( (valid) => {
          if (valid) {
            const data = JSON.parse(JSON.stringify(this.form));
            data.inquiryId = this.$route.query.inquiryId
            this.btnLoading = true;
            addSupplierPrice(data).then((res) => {
              this.isSubmit = 2
              this.btnLoading = false
            }).catch(() => {
              this.btnLoading = false;
            })
          }
        });
      },
    },
  }
</script>

<style lang="scss">
  .invite-page{
    background: url("https://pic.moresu.com/FlTzpkYzJrN1HJJWxptAfHzAkhLo") no-repeat;
    background-size: cover;
    width:100vw;
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0;
    .from-div{
      width:360px;
      .logo{
        text-align: center;
        margin-bottom:10px;
        img{
          width:360px;
        }
      }
      .from-con{
        background: url("https://pic.moresu.com/FhTSlTnYbvysiP3MZO4BXYAT2eiL") no-repeat;
        background-size: cover;
        width:360px;
        height:474px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top:106px;
        .invit-form{
          width:320px;
          .form-top{
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 16px 0;
            border-bottom: 1px solid #DCDFE6;
            margin-bottom: 16px;
            .form-top-left{
              width:70%;
              padding-right:10px;
              .goodsName{
                font-size:14px;
                color:#0f6efe
              }
              .btn-label{
                font-size:12px ;
                color:#f5b904;
                margin-top:4px;
                span{
                  display: inline-block;
                  padding:3px 6px;
                  background: #fdfaef;
                  border:1px solid #f6d707;
                  border-radius: 4px;
                }
              }
            }
            .form-top-right{
              text-align: right;
              color:#f7b400 ;
              font-size: 14px;
              width:30%;
              font-weight: bold;
            }
          }
          .el-form-item__label{
            font-size: 12px !important;
            color:#3f3f3f;
          }
          .form-item-span{
            font-size: 12px;
            color:#3f3f3f;
            padding-left: 5px;
          }
          .el-input__inner{
            width:calc(320px - 90px);
          }
          .el-input.price{
            display: inline-block;
            width:auto;
          }
          .el-input.price .el-input__inner{
            width:calc(320px - 130px);
          }
          .el-form-item{
            margin-bottom: 16px;
          }
        }
        .form-btn{
          padding:0 10px;
          .el-button--primary{
            background-color: #1771fd;
            border-color: #1771fd;
            padding: 10px;
            font-size: 14px;
            border-radius: 4px;
          }
          .el-button--primary:active{
            background-color: #5c9cff;
            border-color: #5c9cff;
          }
        }
        .success-div{
          width:100%;
          text-align: center;
          .success-text{
            font-size: 14px;
            color:#3f3f3f;
            margin-top:40px;
          }
        }
      }
    }
  }
  @media (min-width: 700px) {
    .invite-page{
      width:100vw;
      height: auto;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding:40px;
      min-height: 100vh;
      .from-div{
        width:664px;
        .logo{
          margin-bottom:20px;
          img{
            width:448px
          }
        }
        .from-con{
          width:664px;
          height:873px;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          padding-top:196px;
          .invit-form{
            width:594px;
            .form-top{
              display: flex;
              align-items: flex-start;
              justify-content: flex-start;
              padding: 30px 0;
              margin-bottom: 30px;
              .form-top-left{
                width:70%;
                padding-right:20px;
                .goodsName{
                  font-size:26px ;
                }
                .btn-label{
                  font-size:20px ;
                  margin-top:10px;
                  span{
                    display: inline-block;
                    padding:5px 10px;
                    border-radius: 8px;
                  }
                }
              }
              .form-top-right{
                font-size: 26px;
                width:30%;
                font-weight: bold;
              }
            }
            .el-form-item__label{
              font-size: 20px !important;
            }
            .form-item-span{
              font-size: 20px;
              padding-left: 5px;
            }
            .el-input__inner{
              width:calc(594px - 150px);
            }
            .el-input.price{
              width:auto;
            }
            .el-input.price .el-input__inner{
              width:calc(594px - 210px);
            }
            .el-form-item{
              margin-bottom: 32px;
            }
          }
          .form-btn{
            padding:20px;
            .el-button--primary{
              padding: 16px 20px;
              font-size: 20px;
              border-radius: 8px;
            }
          }
          .success-div{
            .success-text{
              font-size: 20px;
              margin-top:60px;
            }
          }
        }
      }
    }
  }
</style>
